import React from "react";
import ReactDom from 'react-dom';
import './loginPage.scss';
import { t } from '../../i18n';
import {useHistory} from 'react-router-dom';
import {observer} from "mobx-react";


export const LoginPage =observer( ()=>{



    return(
        <div id="content-container" className="container">
            <div className="user-section login-section">
                <div className="logon-tab clearfix"><a className="active">{t('user.login')}</a> <a
                    href="">{t('user.register')}</a></div>
                <div className="login-main">
                    <form name="form" id="login-form" className="form-vertical" method="POST" action="">
                        <input type="hidden" name="url" value="{$url}"/>
                        <div className="form-group">
                            <label className="control-label" htmlFor="account">{t('user.username')}</label>
                            <div className="controls">
                                <input className="form-control input-lg" id="account" type="text" name="account"
                                       value="" data-rule="required" placeholder={t('user.Email/Mobile/Username')}
                                       autoComplete="off" />
                                    <div className="help-block"></div>
                            </div>
                        </div>
                        <div className="form-group">
                            <label className="control-label" htmlFor="password">{t('user.password')}</label>
                            <div className="controls">
                                <input className="form-control input-lg" id="password" type="password" name="password"
                                       data-rule="required;password" placeholder={t('user.password')} autoComplete="off"/>
                            </div>
                        </div>
                        <div className="form-group">
                            <div className="controls">
                                <label style={{visibility:'hidden'}}>
                                    <input type="checkbox" name="keeplogin"  value="1"/>
                                </label>
                                <div className="pull-right"><a href="" className="btn-forgot">{t('user.forgot password')}</a></div>
                            </div>
                        </div>
                        <div className="form-group">
                            <button type="submit" className="btn btn-primary btn-lg btn-block">{t('user.sign in')}</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    )
})